import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:imember/Util/Global.dart';
import 'package:imember/Util/MyColor.dart';
import 'package:imember/Widget/MyImage.dart';
import 'package:imember/Widget/MyInput.dart';

class PayInput extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _PayInput();
  }
}

class _PayInput extends State {
  bool TB = false;
  bool RMB = false;
  bool Gift = false;
  bool Card = false;
  bool Mobile = false;
  int selectedPay = 0;
  static int Line = 1;
  static int JkoPay = 2;
  static int WeChat = 3;
  static int AliPay = 4;
  static int OtherPay = 5;

  switchPay(int payType) {
    setState(() {
      selectedPay = payType;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        padding: EdgeInsets.only(left: 24),
        child: Column(children: [
          Container(height: 30),
          Row(children: [Text("　　應收", style: TextStyle(fontSize: 15, color: MyColor.C70, fontWeight: FontWeight.bold)), ValueBox("120")]),
          Container(height: 30),
          Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text("實收/\n付款方式", textAlign: TextAlign.end, style: TextStyle(fontSize: 15, color: MyColor.C70, fontWeight: FontWeight.bold)),
            Container(width: 14),
            Column(children: [
              Input("台幣　　", selected: TB, onSwitch: () {
                TB = !TB;
                setState(() {});
              }),
              Input("人民幣　", selected: RMB, onSwitch: () {
                RMB = !RMB;
                setState(() {});
              }),
              Input("禮券　　", selected: Gift, onSwitch: () {
                Gift = !Gift;
                setState(() {});
              }),
              Input("信用卡　", selected: Card, onSwitch: () {
                Card = !Card;
                setState(() {});
              }),
              Card
                  ? Row(children: [
                      Container(width: 38, height: 40),
                      Text("卡號末四碼", style: TextStyle(fontSize: 11, color: MyColor.C70)),
                      Container(
                          width: 178,
                          height: 24,
                          decoration: BoxDecoration(
                              color: MyColor.White,
                              borderRadius: BorderRadius.all(Radius.circular(20)),
                              border: Border.all(color: MyColor.C99, width: 1)),
                          margin: EdgeInsets.fromLTRB(18, 0, 0, 0),
                          padding: EdgeInsets.fromLTRB(10, 0, 18, 0),
                          child: NormalInput(fontSize: 15, inputType: NormalInput.Number, customReg: NormalInput.mathReg))
                    ])
                  : Container(),
              Input("行動支付", selected: Mobile, onSwitch: () {
                Mobile = !Mobile;
                setState(() {});
              }),
              Mobile
                  ? Container(
                      width: 280,
                      margin: EdgeInsets.only(top: 16),
                      decoration: Global.getWhiteBg(8),
                      padding: EdgeInsets.all(8),
                      child: Column(children: [
                        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                          MyContainer(
                              child: LocalImage("pay_line.png", width: 50),
                              selected: selectedPay == Line,
                              onTap: () {
                                switchPay(Line);
                              }),
                          MyContainer(
                              child: LocalImage("pay_ali.png", width: 50),
                              selected: selectedPay == AliPay,
                              onTap: () {
                                switchPay(AliPay);
                              }),
                          MyContainer(
                              child: Text("其他"),
                              selected: selectedPay == OtherPay,
                              onTap: () {
                                switchPay(OtherPay);
                              }),
                        ]),
                        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                          MyContainer(
                              child: LocalImage("pay_jko.png", width: 50),
                              selected: selectedPay == JkoPay,
                              onTap: () {
                                switchPay(JkoPay);
                              }),
                          MyContainer(
                              child: LocalImage("pay_wx.png", width: 50),
                              selected: selectedPay == WeChat,
                              onTap: () {
                                switchPay(WeChat);
                              }),
                          Container(width: 74)
                        ]),
                        selectedPay == OtherPay
                            ? Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                                Text("其他", style: TextStyle(fontSize: 14, color: MyColor.C70)),
                                Container(
                                    width: 140,
                                    height: 24,
                                    decoration: BoxDecoration(
                                        color: MyColor.White,
                                        borderRadius: BorderRadius.all(Radius.circular(20)),
                                        border: Border.all(color: MyColor.C99, width: 1)),
                                    margin: EdgeInsets.fromLTRB(18, 10, 0, 10),
                                    padding: EdgeInsets.fromLTRB(10, 0, 18, 0),
                                    child: NormalInput(fontSize: 14))
                              ])
                            : Container()
                      ]))
                  : Container()
            ])
          ]),
          Container(height: 20),
          Row(children: [Text("　　尚餘", style: TextStyle(fontSize: 15, color: MyColor.C70, fontWeight: FontWeight.bold)), ValueBox("120")]),
          Container(height: 20),
          Row(children: [Text("　　應找", style: TextStyle(fontSize: 15, color: MyColor.C70, fontWeight: FontWeight.bold)), ValueBox("120")]),
        ]));
  }
}

class MyContainer extends StatelessWidget {
  Function()? onTap;
  bool selected;
  Widget child;

  MyContainer({this.onTap, required this.selected, required this.child});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: onTap,
      child: Container(
        width: 60,
        height: 48,
        margin: EdgeInsets.fromLTRB(7, 4, 7, 4),
        alignment: Alignment.center,
        child: child,
        decoration: selected ? Global.getOrangeBg_shadow(8, MyColor.C9) : Global.getWhiteBg_shadow(8, MyColor.C9),
      ),
    );
  }
}

class Input extends StatelessWidget {
  TextEditingController? controller;
  String text;
  bool selected;
  Function()? onSwitch;

  Input(this.text, {required this.selected, this.onSwitch, this.controller});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        LocalImage(selected ? "circle_check_yes.png" : "circle_check_no.png",
            width: 18, height: 18, padding: EdgeInsets.all(10), onTap: onSwitch),
        Text(text, style: TextStyle(fontSize: 14, color: MyColor.C70)),
        Container(
            width: 178,
            height: 24,
            decoration: BoxDecoration(
                color: MyColor.White,
                borderRadius: BorderRadius.all(Radius.circular(20)),
                border: Border.all(color: MyColor.C99, width: 1)),
            margin: EdgeInsets.fromLTRB(18, 0, 0, 0),
            padding: EdgeInsets.fromLTRB(10, 0, 18, 0),
            child: NormalInput(
                fontSize: 15, enable: selected, inputType: NormalInput.Number, customReg: NormalInput.mathReg, controller: controller))
      ],
    );
  }
}

class ValueBox extends StatelessWidget {
  String value;

  ValueBox(this.value);

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 178,
        height: 24,
        alignment: Alignment.center,
        decoration: BoxDecoration(color: MyColor.DD, borderRadius: BorderRadius.all(Radius.circular(20))),
        margin: EdgeInsets.fromLTRB(24, 0, 0, 0),
        child: Text(value, style: TextStyle(fontSize: 15, color: MyColor.C70)));
  }
}
